<!DOCTYPE html>
<html class="x-admin-sm">
{include file='public/header'}
<script src="/admin/xadmin/lib/layui/upload.js" charset="utf-8"></script>
<style>
    .layui-form-label{
        width: 120px;
    }
    .layui-input-block{
        margin-left: 150px;
    }
    .box{
        width: 300px;
        padding:15px 10px;
        background-color: #eee;
        border-radius: 6px;
        font-size: 13px;
        line-height: 24px;
    }
</style>
<body>
    <div class="x-body">
        <form class="layui-form" lay-filter="formAjax">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>关键字
                </label>
                <div class="layui-input-block">
                    <input type="text" name="keyword" placeholder="关键字" required="required"
                        lay-verify="required" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>类型
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="1" lay-filter="*" title="小程序链接" checked>
                    <input type="radio" name="type" value="2" lay-filter="*" title="小程序卡片">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>链接类型
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="link_type" value="1" title="短剧" checked>
                    <!-- <input type="radio" name="link_type" value="2" title="推广链接">
                    <input type="radio" name="link_type" value="3" title="常用链接">
                    <input type="radio" name="link_type" value="4" title="活动链接">
                    <input type="radio" name="link_type" value="5" title="纯文本"> -->
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>小程序标题
                </label>
                <div class="layui-input-block">
                    <input type="text" name="title" placeholder="小程序标题" required="required"
                        lay-verify="required" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>选择短剧
                </label>
                <div id="pVideo" style="width:100%;flex:1"></div>
            </div>
            <div id="message">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>链接地址
                    </label>
                    <div id="pMenu" style="width:100%;flex:1"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        上行文字
                    </label>
                    <div class="layui-input-block">
                        <textarea name="up_text" placeholder="上行文字" class="layui-textarea" autocomplete="off"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        下行文字
                    </label>
                    <div class="layui-input-block">
                        <textarea name="down_text" placeholder="下行文字" class="layui-textarea" autocomplete="off"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        效果
                    </label>
                    <div class="layui-input-block">
                        <div class="box">
                            <div id="up"></div>
                            <div id="title" class="layui-font-blue"></div>
                            <div id="down"></div>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="id" class="layui-input" value="{$data.id|default=''}" />
            </div>
            <div id="card" style="display: none;">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>小程序封面
                    </label>
                    <button type="button" class="layui-btn" id="uploadImg">
                        上传
                    </button>

                    <div class="layui-upload-list" style="display: none;margin-left: 150px;">
                        <img onclick="showimg(this)" class="layui-upload-img" style="width: 100px;">
                    </div>
                    <input type="hidden" name="cover" id="cover" value="" />
                    <input type="hidden" name="media_id" id="media_id" value="" />
                </div>
            </div>
            

            <input type="hidden" name="id" id="id" value="" />
            <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;" />

        </form>
    </div>
    <script>
        let params = {
            addUrl: '/cps/keyword/add',
            editUrl: '/cps/keyword/edit',
            detailUrl: '/cps/keyword/detail',
        }
        form_ajax(params)

        let selectParams = {
            url: '/cps/officialAccount/linkSelect',
            selected: [],
            tips: '选择地址',
            name: 'link_url',
            field_id: 'value',
            field_Name: 'name',
            elem: '#pMenu'
        }
        let video_selectParams = {
            url: '/cps/video/select',
            selected: [],
            tips: '选择短剧',
            name: 'video_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pVideo'
        }
        selectN(video_selectParams)

        let id = GetQueryString('id')
        if (id) {
            Ajax(params.detailUrl, { id }).then(result => {
                selectParams.selected = [result.data.link_url]
                video_selectParams.selected = [result.data.video_id]
                selectN(selectParams)
                selectN(video_selectParams)
                $('#up').html(formatValue(result.data.up_text))
                $('#title').html(formatValue(result.data.title))
                $('#down').html(formatValue(result.data.down_text))
                if(result.data.cover){
                    $('.layui-upload-list').show()
                    $('.layui-upload-img').attr('src', result.data.cover);
                }
                if(result.data.type == 1){
                    $('#message').show()
                    $('#card').hide()
                }else{
                    $('#card').show()
                    $('#message').hide()
                }
            });
        } else {
            selectN(selectParams)
        }
        // form表单操作
        layui.use(["form", "layer", "upload"], function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer,
                upload = layui.upload;
            
            form.on('radio(*)', function(data){
                if(data.value == 1){
                    $('#message').show()
                    $('#card').hide()
                }else{
                    $('#card').show()
                    $('#message').hide()
                }
            });
            upload.render({
                elem: '#uploadImg' //绑定元素
                ,url: '/cps/officialAccount/upload' //上传接口
                ,done: function(res){
                    //上传完毕回调
                    $('.layui-upload-list').show()
                    $('.layui-upload-img').attr('src', res.data.host_url);
                    $("input[name='cover']").val(res.data.host_url);
                    $("input[name='media_id']").val(res.data.media_id);
                }
                ,error: function(){
                    //请求异常回调
                }
            });
        })
        $('textarea[name=up_text]').on('input',function(e){
            setDom('#up',formatValue($(this).val()))
            $(this).html()
        })
        $('textarea[name=down_text]').on('input',function(e){
            setDom('#down',formatValue($(this).val()))
            $(this).html()
        })
        $('input[name=title]').on('input',function(e){
            setDom('#title',$(this).val())
        })
        // 处理效果 内容
        function formatValue(value){
            let text = value;
            text = text.replace(/\r\n/g,"<br>")//兼容i7、i8
            text = text.replace(/\n/g,"<br>"); //i9及以上
            
            text = text.replace(/\s/g," ");//替换所有的空格（中文空格、英文空格都会被替换）
            return text
        }

        function setDom(id,value){
            $(id).html(value)
        }
        
    </script>
</body>

</html>